
<template>
  <div id="login">
    <div id="container">
      <div id="row">
        <div id="welcome">
          <p id="weltext1">欢迎光临</p>
          <p id="weltext2">登录你的账号，与我们一起开始旅程吧</p>
        </div>

        <div id="loginBox">
          <p id="loginText">&nbsp;&nbsp;&nbsp;登&nbsp;&nbsp;录</p>
          <a-form-model ref="form" :model="form" :rules="rules">
            <a-form-model-item prop="email">
              <label for="email">邮箱</label>
                <input type="email" id="email" v-model="form.uEmail" placeholder="请输入登录的邮箱" autocomplete="off">
              <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />

            </a-form-model-item>
            <a-form-model-item prop="password">
              <label for="password">密码</label>
              <input type="password" v-model="form.uPwd" id="password"  placeholder="请输入密码" autocomplete="off">
                <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />

            </a-form-model-item>

            <div>
              <div style="margin:10px">
              <a-checkbox
                  v-decorator="[
          'remember',
          {
            valuePropName: 'checked',
            initialValue: true,
          },
        ]"
             style="text-align: center;display: inline;" >
                记住我
              </a-checkbox>
              </div>

              <button class="login" type="button" @click="login()" html-type="submit">登录</button>

              <a class="login-form-forgot" href="" style="position:absolute;text-decoration:underline;color:white;left:-20px; bottom: -20px;  width: 200px; height: 50px;">
                忘记密码
              </a>

              <a>
                <router-link to="/register" style="position:absolute; text-decoration:underline;color:white;right:-20px; bottom:-20px;  width: 200px; height: 50px;">现在注册!</router-link>
              </a>
            </div>
          </a-form-model>

        </div>
      </div>
    </div>

  </div>

</template>

<script>
import {setCookie,getCookie} from "../cookie.js";
export  default {
  name: 'login',
  data () {
    return {
      form:{
        uEmail:'',
        uPwd:'',
      },
      rules: {
        uEmail: { required: true, message: '请输入邮箱', trigger: 'blur' },
        uPwd: { required: true, message: '请输入登录密码', trigger: 'blur' }
      },
      captcha:'',
      u_name:'',
      id:'',
      img:'',
      token:'',
    }
  },
  methods: {
    select(){
      var _this = this;
      _this.$axios.post('/api/user/selectByUserId',
          _this.$qs.stringify({
            uId:_this.id,
          }),
          {headers:{access_token:_this.token}}
      ).then(function (response) {
        console.log("根据用户id获取信息如下：")
        console.log(response.data);
        console.log(response.data.data.u_img);
        console.log(response.data.data.u_name);
        _this.img = response.data.data.u_img;
        _this.u_name=response.data.data.u_name;
      }).catch(function (error) {
        console.log(error);
        _this.$message.error('请求失败');
      })
    },//end onSearch函数，进行问题的搜索
    login() {
      //e.preventDefault();
      var _this = this;
      console.log("输入的邮箱为："+_this.form.uEmail);
      console.log("输入的密码为："+_this.form.uPwd);
      _this.$axios.post('/api/user/login',
          _this.$qs.stringify({
            uEmail:_this.form.uEmail,
            uPwd:_this.form.uPwd,
          }),
          { headers: { access_token: _this.token } }
      ).then(function (response) {
        console.log('请求成功');
        console.log(response);
        console.log("返回的token为："+response.data.data.token);
        console.log("返回的用户id为："+response.data.data.user_id);
        _this.id = response.data.data.user_id;
        _this.token = response.data.data.token;
        localStorage.setItem('access_token',_this.token);
        /*_this.select();*/
        setCookie(response.data.token);
        /*console.log("返回的img为："+_this.img);
        console.log("返回的用户名为："+_this.u_name);*/
        _this.$router.push({
          path:'/mainPage',
          name:'mainPage',//路由命名
          params:{
            id: response.data.data.user_id,
            /*u_name:_this.u_name,*/
            //img:_this.img,
            token:response.data.data.token,
          }
        })
        _this.$message.success('恭喜您，登录成功');
      }).catch(function (error) {
        console.log(error);
        _this.$message.error('对不起，登录失败');
      })
      //}
      //});
    },

    tokenConfirm(token){
      // var _this = this;
      var _token = getCookie(token);
      this.axios.get('http://localhost:8080/tokenConfirm',{
        params:{
          token:_token
        }
      }).then(function(response){
        var obj = response.data;
        console.log(obj);
      }).catch(function(error){
        console.log(error);
      });
    },


  },

}
</script>

<style scoped>

button {
  height: 40px;
  width: 200px;
  border-radius: 40px;
  font-size: 20px;
  margin-left: 5%;
  margin-top: 10px;
  background: lightblue;
  left: 100px;
  position: absolute;

}
button:hover{
  font-weight: bold;
  color: #020002ab;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
button:active {
  transform: translateY(4px);
}


#container{
  position: absolute;
  width: 1000px;
  top: 80px;
  height: 400px;

}
#row{
  position: absolute;

  left: 300px;
  width: 80%;

}

#weltext2{

  font-size: 20pt;
  font-family: 宋体, serif;
  font-weight: bolder;
  position: absolute;
  top: 150px;

  padding: 0 30px;
}

#loginBox{
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  text-align: center;
  width: 400px;
  height: 400px;
  padding-bottom: 10px;
  -webkit-box-shadow: 2px 2px 10px #444;
  box-shadow: 2px 2px 10px #444;
  top: 0px;
  position: absolute;
  left: 46%;

}
#welcome{
  position: absolute;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  text-align: center;
  width: 430px;
  height: 400px;
  padding-bottom: 20px;
  -webkit-box-shadow: inset 1px 1px 10px #444;
  box-shadow: inset 1px 1px 10px #444;
  right: 435px;
}

label{
  display: inline-block;
  width: 50px;
  text-align: left;
  font-size: 45px;
  color:white;
  font-weight: bold;
}

input{
  width:250px;
  height:40px;
  /*display: block;*//*设置成块级元素，独占一行*/
  margin: 5px auto;/*外边距30px，输入框居中*/
  padding: 8px;/*设置内边距*/
  text-align: center;/*文字居中*/
  border: 1px solid #EBEBEB;/*把输入框包起来，变成长方形*/
  border-radius: 10px;/*让长方形的4个角弯一点，*/
  font-family: 'Source Sans Pro', sans-serif;/*字体类型*/
  font-size: 18px;/*字体大小*/
  outline: none;
  color:black;

}
#loginText{
  margin-top:18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgb(240, 240, 245);
  font-size:40px;

}
#weltext1{
  color: black;
  font-size: 35pt;
  font-family: 微软雅黑,serif;
  font-weight: bolder;
  position: absolute;
  top: 50px;
  left: 30%;
  transform: translate(-50%);
}
#login
{
  height:100%;
  width:100%;
  background-image: linear-gradient(lightskyblue, lightblue);
  background-size: cover;
  background-attachment: fixed;
}

</style>
